import React, { useState, useEffect } from 'react';
import './index.css';
import {Image} from "antd";



function AliyunSms(props) {

	const {  } = props;

	return (
		<div id='aliyun-sms' className='section'>
			<p className='mark'>以下步骤源自《阿里云短信服务指南》<a href="https://help.aliyun.com/zh/sms/getting-started/use-sms-api" target='_blank'>阿里云短信服务指南</a>(https://help.aliyun.com/zh/sms/getting-started/use-sms-api)</p>
			<div id='aliyun-sms-register' className='operate-section'>
				<h4>【开通阿里云短信服务】 打开<a href="https://www.aliyun.com/product/sms" target='_blank'>阿里云短信服务</a>(https://www.aliyun.com/product/sms)</h4>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_17.png' /></div>
				<h4>第二步 生成子账号密钥</h4>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_3.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_4.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_5.png' /></div>
				<h4>第三步 短信密钥填入管理后台</h4>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_6.png' /></div>
				<h4>第四步 新增短信资质(国内消息)</h4>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_7.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_8.png' /></div>
				<h4>第五步 添加签名</h4>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_9.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_10.png' /></div>
				<h4>第六步 添加验证码模板和短信通知模板</h4>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_11.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_12.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_13.png' /></div>
				<div dangerouslySetInnerHTML={{ __html: "您有${status}订单待处理，金额：${money}元，用户：${name}，订单编号：${order}" }}></div>
				{/*<textarea>您有${status}订单待处理，金额：${money}元，用户：${name}，订单编号：${order}</textarea>*/}
				<h4>用户下单或退款时发送短信通知。 示例: 您有已支付订单待处理，金额：125.90元，用户：张小军，订单编号：A126829570781431</h4>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_14.png' /></div>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_15.png' /></div>
				<h4>第七步 配置短信状态回调地址</h4>
				<p className='mark'>https://此处替换成您的服务器域名/api/v1/sms/aliyunstatus</p>
				<div className='image-wrapper'><Image src='./images/aliyunsms/aliyunsms_16.png' /></div>
			</div>
			<div id='aliyun-sms-setting' className='param-section'>
				<h3>【阿里云短信配置】已在"短信密钥填入管理后台"和"添加验证码模板和短信通知模板"时说明过了，请参考填入毛毛虫管理后台->系统设置</h3>
			</div>

		</div>
	);
}

export default AliyunSms;
